/* the box shadow is taken from photon-button primary button focus styling
https://design.firefox.com/photon/components/buttons.html */

/* removes the default Firefox focus indicator,
so that we can add a custom indicator */
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
}

input[type='radio']:focus-visible,
input[type='checkbox']:focus-visible,
input[type='button']:focus-visible,
input[type='submit']:focus-visible,
input[type='reset']:focus-visible,
input[type='image']:focus-visible,
input[type='range']:focus-visible,
select:focus-visible,
button:focus-visible {
  box-shadow:
    0 0 0 1px var(--blue-50) inset,
    0 0 0 1px var(--blue-50),
    0 0 0 4px var(--blue-50-a30);
  outline: 0;
}

a:focus-visible {
  box-shadow:
    0 0 0 2px var(--blue-50),
    0 0 0 6px var(--blue-50-a30);
  outline: 0;
}
